<template>
<div>
    <j-modal
      width="80%"
      :title="title"
      :visible.sync="editModalVisible"
      :fullscreen.sync="fullscreen"
      :switch-fullscreen="switchFullscreen"
      @cancel="handleCancleDbSync"
      :destroyOnClose="true"
    >
      <template slot="footer">
        <a-button @click="handleCancleDbSync">
          关闭
        </a-button>
        <a-button v-if="!isDetail" type="primary" :loading="syncLoading" @click="handleSure">确定</a-button>
      </template>
      <div class="table-page-search-wrapper warp" :style="{maxHeight:fullscreen?'779px':'588px'}">
        <a-form-model ref="ruleForm" :model="formData" :rules="isDetail?{}:rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="计划名称" prop="planName">
                <span v-if="isDetail">{{formData.planName}}</span>
                <a-input v-else v-model="formData.planName" placeholder="请输入计划名称"/>
            </a-form-model-item>
            <a-form-model-item label="计划code" prop="planCode">
                <span v-if="isDetail">{{formData.planCode}}</span>
                <a-input v-else v-model="formData.planCode" placeholder="请输入计划code"/>
            </a-form-model-item>
            <a-form-model-item label="描述" prop="remark">
                <span v-if="isDetail">{{formData.remark}}</span>
                <a-textarea v-else v-model="formData.remark" placeholder="请输入描述信息" allow-clear :auto-size="{ minRows: 3, maxRows: 5 }" />
            </a-form-model-item>
            <a-row class="table-style">
                <a-col :span="20" :offset="2">
                    <a-table
                        size="middle"
                        bordered
                        rowKey="id"
                        :columns="columns"
                        :data-source="ruleList"
                        :pagination="false"
                        :row-selection="{selectedRowKeys: planSelectedRowKeys,selectionRows:formData.rulePartitions,onChange: onPlanSelectChange,getCheckboxProps: getCheckboxProps}"
                        >
                    </a-table>
                </a-col>
            </a-row>
            <a-form-model-item label="执行周期" prop="executionCycle">
                <span v-if="isDetail">{{formData.executionCycle}}</span>
              <j-cron v-else ref="innerVueCron" :value="formData.executionCycle" @change="setCorn"></j-cron>
            </a-form-model-item>
        </a-form-model>
      </div>
    </j-modal>
</div>
</template>
<script>
import JCron from "@/components/jeecg/JCron.vue";
const columns = [
    {
        title: '质量规则名称',
        dataIndex: 'ruleName',
    },
    {
        title: '质量规则类别',
        dataIndex: 'ruleTypeName'
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime'
    },
]
const ruleList = [
    {id:1,ruleName:'规则一',ruleTypeName:'公用',createTime:'2021年03月17日',updateTime:'2021年03月17日'},
    {id:2,ruleName:'规则二',ruleTypeName:'私有',createTime:'2021年03月17日',updateTime:'2021年03月17日'}
]
export default {
  name: 'AddRuleModal',
  component:{
      JCron
  },
  data() {
    return {
      isDetail:false,
      ruleList,
      columns,
      planSelectedRowKeys:[],
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
      editModalVisible: false,
      title: '编辑',
      syncLoading: false,
      fullscreen: true,
      switchFullscreen: true,
      formData: {
          planName:'',
          planCode:'',
          remark:'',
          executionCycle:'* * * * * ? *',
          rulePartitions:[]
      },
      rules: {
        planName: [
          { required: true, message: '请输入计划名称', trigger: 'change' }
        ],
        planCode: [
          { required: true, message: '请输入计划code', trigger: 'change' }
        ],
        executionCycle: [
          { required: true, message: '请设置执行周期', trigger: 'change' }
        ],
      }
    }
  },
  watch: {
    
  },
  mounted() {
  },
  methods: {
    getCheckboxProps() {
        return ({
            props: {
                disabled: this.isDetail
            }
         })
    },
    setCorn(data){
        this.formData.executionCycle = data
    },
    onPlanSelectChange(planSelectedRowKeys,planSelectionRows){
        console.log(planSelectedRowKeys,planSelectionRows,'keys');
        this.planSelectedRowKeys = planSelectedRowKeys
        this.formData.rulePartitions = planSelectionRows
        console.log(this.formData,'formData');
    },
    handleCancleDbSync() { // 关闭
      this.formData = this.$options.data().formData
      this.planSelectedRowKeys=[]
      this.isDetail = false
      this.editModalVisible = false
    },
    add() {
      this.editModalVisible = true
      console.log(this.formData);
    },
    async edit() {
      this.editModalVisible = true
      await this.getPlanDetail()
    //   设置选中的规则
      this.formData.rulePartitions = this.ruleList
      this.planSelectedRowKeys = [1,2]
    },
    getPlanDetail(){
        console.log(this.formData.id,'id');
    },
    async handleSure() { // 弹窗点击确定
        const valid = await this.$refs['ruleForm'].validate()
        if (valid) {
            this.updateData()
        }
    },
    updateData() { // 保存提交数据
    //   this.syncLoading = true
      const fun = (res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.handleCancleDbSync()
            this.$emit('modalFormOk')
          } else {
            this.$message.warning(res.message)
          }
      }
      if (this.formData.id) {
        //编辑校验计划
        
      } else {
        //新增校验计划
        
      }
    },
  }
}
</script>
<style lang="less" scoped>
.table-page-search-wrapper{
  overflow:auto;
}
.table-style{
    margin-bottom:24px;
}
</style>
<style scoped>
@import '~@assets/less/common.less'
</style>